<template>
  <el-header style="border-bottom: 1px solid #ccc; display: flex; align-items: center; padding: 0 20px;">
    <div style="flex: 1; display: flex; align-items: center;">
      <i :class="collapseBtnClass" style="cursor: pointer; font-size: 24px; margin-right: 20px;" @click="collapse"></i>
      <el-breadcrumb separator-class="el-icon-arrow-right" style="flex: 1;">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><b>{{ currentPathName }}</b></el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div style="display: flex; align-items: center;">
      <!-- 站内信图标，未读消息为0时不显示任何数字或红点 -->
      <el-dropdown trigger="click" @command="handleCommand">
        <span style="cursor: pointer; margin-right: 20px;">
          <el-badge v-if="unreadCount > 0" :value="unreadCount" class="item">
            <i class="el-icon-message" style="font-size: 24px;"></i>
          </el-badge>
          <i v-else class="el-icon-message" style="font-size: 24px;"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <!-- 未读消息 -->
          <el-dropdown-item v-for="message in sortedUnreadMessages" :key="message.id" :command="message">
            <div style="display: flex; justify-content: space-between;">
              <span>{{ message.title }}</span>
              <span style="color: grey; font-size: 12px;">{{ message.time }}</span>
            </div>
            <div style="color: grey; font-size: 12px;">{{ message.content }}</div>
          </el-dropdown-item>

          <!-- 分隔符 -->
          <el-dropdown-item divided disabled>
            历史消息
          </el-dropdown-item>

          <!-- 已读消息（历史消息） -->
          <el-dropdown-item v-for="message in sortedReadMessages" :key="message.id" :command="message">
            <div style="display: flex; justify-content: space-between;">
              <span>{{ message.title }}</span>
              <span style="color: grey; font-size: 12px;">{{ message.time }}</span>
            </div>
            <div style="color: grey; font-size: 12px;">{{ message.content }}</div>
          </el-dropdown-item>

          <el-dropdown-item divided>
            <el-button type="text" @click="markAllAsRead">批量标记为已读</el-button>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!-- 设置按钮 -->
      <i class="el-icon-setting" @click="openSettingsDrawer" style="cursor: pointer; font-size: 24px; margin-right: 20px;"></i>

      <!-- 全屏按钮 -->
      <i :class="fullscreenIcon" @click="toggleFullscreen" style="cursor: pointer; font-size: 24px; margin-right: 20px;"></i>

      <!-- 用户信息下拉菜单 -->
      <el-dropdown>
        <div style="display: flex; align-items: center; cursor: pointer;">
          <img src="../assets/logo.png" style="width: 45px; height: 45px; border-radius: 50%; margin-right: 8px;">
          <span>张三 <i class="el-icon-arrow-down" style="margin-left: 5px;"></i></span>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <router-link to="/updatePwd" style="text-decoration: none; color: #606266;">修改密码</router-link>
          </el-dropdown-item>
          <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <!-- 弹出框显示消息详情 -->
    <el-dialog :visible.sync="messageDialogVisible" title="消息详情">
      <p><strong>{{ selectedMessage.title }}</strong></p>
      <p>{{ selectedMessage.content }}</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="messageDialogVisible = false">返回</el-button>
        <el-button type="primary" @click="markAsRead">确定</el-button>
        <el-button v-if="selectedMessage.menu" @click="jumpToMenu">跳转</el-button>
      </div>
    </el-dialog>

    <!-- 抽屉设置面板 -->
    <el-drawer
        title="设置面板"
        :visible.sync="settingsDrawerVisible"
        direction="rtl"
        size="30%">
      <el-form label-position="top">
        <el-form-item label="菜单显示位置">
          <el-radio-group v-model="menuPosition" @change="updateMenuPosition">
            <el-radio label="left">左侧</el-radio>
            <el-radio label="right">右侧</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="页面布局格式">
          <el-radio-group v-model="layoutFormat" @change="updateLayoutFormat">
            <el-radio label="grid">网格布局</el-radio>
            <el-radio label="flex">弹性布局</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="页面尺寸">
          <el-input-number v-model="pageSize" @change="updatePageSize" :min="50" :max="200" label="页面尺寸" />
        </el-form-item>

        <el-form-item label="是否显示菜单搜索">
          <el-switch v-model="showSearch" @change="toggleSearch"></el-switch>
        </el-form-item>
      </el-form>
    </el-drawer>
  </el-header>
</template>

<script>
export default {
  data() {
    return {
      collapseBtnClass: 'el-icon-s-fold',  // 默认的折叠按钮样式
      isCollapsed: false,                  // 控制菜单折叠状态
      isFullscreen: false,
      settingsDrawerVisible: false,
      menuPosition: 'left',
      layoutFormat: 'grid',
      pageSize: 100,
      showSearch: false,
      unreadCount: 3, // 未读消息数量
      messages: [ // 模拟站内信消息列表
        { id: 1, title: "系统通知", content: "这是一个系统通知内容", time: "2024-10-23 12:01", menu: "/user", read: false },
        { id: 2, title: "更新提醒", content: "新版本已发布，请及时更新", time: "2024-10-23 11:50", read: false },
        { id: 3, title: "账户提醒", content: "你的账户密码将在7天后过期", time: "2024-10-22 15:30", read: true }
      ],
      selectedMessage: {}, // 当前选中的消息
      messageDialogVisible: false, // 消息详情弹框是否显示
    };
  },
  computed: {
    currentPathName() {
      return this.$store.state.currentPathName;
    },
    fullscreenIcon() {
      return this.isFullscreen ? 'el-icon-crop' : 'el-icon-full-screen';
    },
    // 已读消息按照时间倒序排序
    sortedReadMessages() {
      return this.messages
          .filter(message => message.read)
          .sort((a, b) => new Date(b.time) - new Date(a.time));
    },
    // 未读消息按照时间倒序排序
    sortedUnreadMessages() {
      return this.messages
          .filter(message => !message.read)
          .sort((a, b) => new Date(b.time) - new Date(a.time));
    },
  },
  methods: {
    collapse() {
      this.isCollapsed = !this.isCollapsed;
      this.collapseBtnClass = this.isCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold';
      this.$emit('collapse');  // 触发父组件的折叠事件
    },
    logout() {
      this.$store.commit('logout');
      this.$router.push('/login');
    },
    toggleFullscreen() {
      if (!this.isFullscreen) {
        const element = document.documentElement;
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      } else {
        if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        }
      }
      this.isFullscreen = !this.isFullscreen;
    },
    onFullscreenChange() {
      // 根据文档的全屏状态更新 isFullscreen 状态
      this.isFullscreen = !!(
          document.fullscreenElement ||
          document.mozFullScreenElement ||
          document.webkitFullscreenElement ||
          document.msFullscreenElement
      );
    },
    openSettingsDrawer() {
      this.settingsDrawerVisible = true;
    },
    updateMenuPosition() {
      this.$emit('update-menu-position', this.menuPosition);
    },
    updateLayoutFormat() {
      this.$emit('update-layout-format', this.layoutFormat);
    },
    updatePageSize() {
      this.$emit('update-page-size', this.pageSize);
    },
    toggleSearch(value) {
      this.$emit('toggle-search', value);
    },
    handleCommand(message) {
      this.selectedMessage = message;
      this.messageDialogVisible = true; // 显示弹框
    },
    markAsRead() {
      this.selectedMessage.read = true;
      this.messageDialogVisible = false; // 关闭弹框
      this.updateUnreadCount(); // 更新未读消息计数
    },
    jumpToMenu() {
      this.$router.push(this.selectedMessage.menu); // 跳转到消息中的菜单路由
      this.messageDialogVisible = false; // 关闭弹框
    },
    markAllAsRead() {
      this.messages.forEach(msg => {
        msg.read = true;
      });
      this.updateUnreadCount(); // 更新未读消息计数
    },
    updateUnreadCount() {
      this.unreadCount = this.messages.filter(msg => !msg.read).length;
    }
  }
};
</script>


<style scoped>
.el-header img {
  border-radius: 50%;
}

.el-breadcrumb-item {
  font-weight: bold;
}
</style>
